<template>
  <div class="field-wrapper" @mouseover="enter" @mouseleave="leave">
    <el-form-item  :label="data.name">
      <slot></slot>
    </el-form-item>
    <div class="field-action" v-if="showOpt">
      <i title="删除组件" @click.stop="remove(data.fieldId)">
          <el-icon><Close /></el-icon>
      </i>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import {Close} from '@element-plus/icons-vue';

  const state = reactive({
    showOpt: false,
  });
  const {
    showOpt
  }  = toRefs(state);

  const parentData = defineProps({
       data:{
          type: String,
          name: String,
          fieldId:String,
       }
  });

  /**子组件调用父的方法**/
  const emits = defineEmits(['remove']);
  function remove(fieldId){
     emits('remove',fieldId)
  }

  function enter(){
     state.showOpt =true;
  }

  function leave(){
    state.showOpt =false;
  }
</script>

<style lang="scss" scoped>
  $--color-primary: #409EFF;
  .design-time-bottom-margin {
    margin-bottom: 5px;
  }

  .field-wrapper {
    position: relative;

    .field-action{
      position: absolute;
      top: -2px;
      left: -1px;
      height: 15px;
      line-height: 15px;
      z-index: 9;

      i {
        border-radius: 50%;
        width: 12px;
        height: 10px;
        font-size: 8px;
        font-style: normal;
        color: #fff;
        background: red;
      }
    }

   
  }

  .field-action {
    :deep(.svg-icon) {
      margin-left: 0;
      margin-right: 0;
    }
  }

  .el-form-item {
    //margin-bottom: 0 !important;
    //margin-bottom: 6px;

    //margin-top: 2px;
    position: relative;

    :deep(.el-form-item__label) {
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    :deep(.el-form-item__content) {
      //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
    }

    span.custom-label i {
      margin: 0 3px;
    }

    /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
    :deep(.hide-spin-button) input::-webkit-outer-spin-button,
    :deep(.hide-spin-button) input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
    :deep(.hide-spin-button) input[type="number"] {
      -moz-appearance: textfield;
    }
  }

  .required :deep(.el-form-item__label)::before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }

  .static-content-item {
    min-height: 20px;
    display: flex;  /* 垂直居中 */
    align-items: center;  /* 垂直居中 */

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }

  .el-form-item.selected, .static-content-item.selected {
    outline: 2px solid $--color-primary;
  }

  :deep(.label-left-align) .el-form-item__label {
    text-align: left;
    justify-content: flex-start !important;
  }

  :deep(.label-center-align) .el-form-item__label {
    text-align: center;
    justify-content: center !important;
  }

  :deep(.label-right-align) .el-form-item__label {
    text-align: right;
    justify-content: flex-end !important;
  }


</style>
